<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>谷歌地球历史影像</title>
    <script type="text/javascript" src="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Cesium.js"></script>
    <script src="./tileserHis.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/cesium/1.80.0/Widgets/widgets.css">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .btn-group {
            position: absolute;
            z-index: 99999;
            top: 20px;
            left: 20px;
            width: 200px;
        }

        .dateDropdownContainer {
            position: absolute;
            z-index: 99999;
            top: 60px;
            /* 调整这个值以避免与按钮组重叠 */
            left: 20px;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn-group" onclick="tileser()">加载历史影像</button>
        </div>
        <div id="dateDropdownContainer" class="dateDropdownContainer" style="display: none;">
            <select id="dateDropdown"></select>
        </div>

    </div>
    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYmM3MjllNS04YTg2LTQ3ZWMtOWFmNi1mN2JiZjk1NWI3MzAiLCJpZCI6MzgzOTgsImlhdCI6MTY3NzI4NjYwNn0.ZGHM2hyly98PYjpQ_krciBisOsevj9VEG_0dif7gT70'
        const viewer = new Cesium.Viewer('cesiumContainer', {});
        viewer._cesiumWidget._creditContainer.style.display = "none"; //版权信息和logo

        // 全局变量，存储当前选中的时间
        let currentSelectedTime;

        // 更新图层的函数
        function updateImageryLayer(decimalTime) {
            viewer.imageryLayers.removeAll(); // 移除所有现有的图层
            var imgLayer = new tileserHisImageryProvider({
                indexTime: decimalTime
            });
            viewer.imageryLayers.addImageryProvider(imgLayer);
        }


       
        // 显示下拉菜单的函数
        function displayDatesInDropdown(allTimes) {
            const dropdown = document.getElementById('dateDropdown');
            dropdown.innerHTML = ''; // 清空现有选项

            let closestIndex = -1;
            let closestDiff = Infinity;

            // 函数：计算两个日期字符串之间的天数差异
            function getDaysDifference(dateStr1, dateStr2) {
                const date1 = new Date(dateStr1);
                const date2 = new Date(dateStr2);
                const diffTime = Math.abs(date2 - date1);
                return diffTime / (1000 * 60 * 60 * 24);
            }

            allTimes.forEach((time, index) => {
                const option = document.createElement('option');
                option.value = time;
                option.textContent = time;
                dropdown.appendChild(option);

                // 寻找与 currentSelectedTime 最接近的时间
                const diff = getDaysDifference(time, currentSelectedTime);
                if (diff < closestDiff) {
                    closestDiff = diff;
                    closestIndex = index;
                }
            });

            // 如果找到最接近的时间，则选择它
            if (closestIndex !== -1) {
                dropdown.selectedIndex = closestIndex;// 更新当前选中的时间
            }

            if (allTimes.length > 0) {
                document.getElementById('dateDropdownContainer').style.display = 'block';
            } else {
                document.getElementById('dateDropdownContainer').style.display = 'none';
            }

            dropdown.onchange = function() {
                currentSelectedTime = dropdown.value; // 更新当前选中的时间
                updateImageryLayer(currentSelectedTime);
            };
        }


        // 初始化地图和监听相机移动事件
        function tileser() {
            updateImageryLayer(0); // 初始化图层
            getAndDisplayInitialTimeData(); // 获取初始时间并显示

            let isCameraMoving = false;
            viewer.camera.moveStart.addEventListener(() => {
                isCameraMoving = true;
            });
            viewer.camera.moveEnd.addEventListener(async () => {
                if (isCameraMoving) {
                    isCameraMoving = false;
                    const allTimes = await getCurrentTileCoordinates(viewer);
                    displayDatesInDropdown(allTimes);
                }
            });
        }

        // 获取初始时间并显示的函数
        async function getAndDisplayInitialTimeData() {
            const initialTimes = await getCurrentTileCoordinates(viewer); // 获取时间数据
            displayDatesInDropdown(initialTimes); // 显示时间数据
        }

          //最新

    </script>
</body>

</html>